<template>
  <view class="p-sku">
    <view v-for="item in list" :key="item.name" class="_dl">
      <view class="_dt">
        <view>{{ item.name }}</view>
        <view v-if="item.hasSpecPic" class="btn-toggle" @click="toggleSkuSize">
          <x-icon :name="toggleIcon" size="24" color="#A4A4A4" />
          {{ toggleText }}
        </view>
      </view>
      <view class="_dd">
        <view
          v-for="sku in item.valueInfo"
          :key="sku.value"
          :class="['_li', {'is-active': item.selected === sku.value}, { large: isLarge && sku.specPic }]"
          @click="handleChangeSku(item, sku.value)"
        >
          <view v-if="sku.specPic" class="pic" @click="handlePreview(sku.specPic)">
            <x-image :src="formatOss(sku.specPic)" />
            <view v-if="isLarge" class="icon-zoom">
              <x-icon name="icon-062" size="36" color="#FFFFFF"/>
            </view>
          </view>
          <text class="sku-value">{{ sku.value }}</text>
          <view class="tag-primary" v-if="sku.recommendedFlag">
            <x-icon name="icon-058" size="24" color="#ffffff" />
            主推
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';
import XImage from '@/components/x-image';
export default {
  name: 'PSku',
  components: {
    XIcon,
    XImage
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      skuSize: 'small'
    };
  },
  computed: {
    toggleText() {
      return this.skuSize === 'small' ? '大图' : '列表';
    },
    toggleIcon() {
      return this.skuSize === 'small' ? 'icon-038' : 'icon-024';
    },

    isLarge() {
      return this.skuSize === 'large';
    }
  },
  created() {

  },
  methods: {
    // 切换sku
    handleChangeSku(row, sku) {
      if (row.selected !== sku) {
        row.selected = sku;
        this.$emit('update:list', this.list);
        this.$emit('change');
      }
    },

    toggleSkuSize() {
      this.skuSize = this.skuSize === 'small' ? 'large' : 'small';
    },

    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 100, 50);
    },

    handlePreview(url) {
      if (this.isLarge) {
        uni.previewImage({
          urls: [url]
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-sku{
    ._dt{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30px; color: $uni-color-default; padding-bottom: 20px;
      .btn-toggle{
        display: flex; align-items: center; font-size: 28px; color: #A4A4A4;
      }
    }
    ._dd{
      display: flex; flex-wrap: wrap;
      ._li{
        position: relative;
        min-width: 144px;  border-radius: 10px; border: 2px solid $uni-bg-color-grey;  color: $uni-color-default; padding: 8px; font-size: 28px; line-height: 28px; margin-right: 30px; margin-bottom: 30px; background: $uni-bg-color-grey;
        display: flex;
        align-items: center;
        .pic{
          flex: none;
          width: 48px; height: 48px; margin-right: 10px;border-radius: 4px;overflow: hidden;
        }
        .sku-value{
          margin: auto;
          padding: 10px 8px;
        }
        &.is-active{ background-color: rgba(235, 68, 31, 0.06); color: #DE3A2E;border: 2px solid #DE3A2E}
        .tag-primary{
          position: absolute;
          top: -26px;
          right: -14px;
          display: flex;
          align-items: center;
          color: #FFFFFF;
          font-size: 24px;
          background: #EB431F;
          border-radius: 6px;
          padding: 6px 10px;
        }

        &.large{
          flex-direction: column;
          width: 206px;
          padding: 0;
          box-sizing: content-box;
          .pic{
            flex: none;
            width: 206px; height: 206px; margin-right: 0;border-radius: 10px;overflow: hidden;

            .icon-zoom{
              position: absolute;
              top: 4px;
              right: 4px;
              width: 30px;
              height: 30px;
              background: rgba(0,0,0,.4);
              border-radius: 50%;
            }
          }
          .sku-value{
            -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all;
            padding: 0;
            margin: 10px 5px;
            font-size: 20px;
          }
        }
      }
    }
  }
</style>
